<!doctype html>
<html>

<head>
    <script>
        var vm = new Vue({
            data: {
                isActive: true,
                hasError: false
            },
            data: {
                classObject: {
                    active: true,
                    'text-danger': false
                }
            },
            data: {
                isActive: true,
                error: null
            },
            computed: {
                classObject: function () {
                    return {
                        active: this.isActive && !this.error,
                        'text-danger': this.error && this.error.type === 'fatal'
                    }
                }
            },
            data: {
                activeClass: 'active',
                errorClass: 'text-danger'
            }
        })

    </script>
</head>

<body>
    <div v-bind:class="{ active: isActive }"></div>

    <div class="static" v-bind:class="{ active: isActive, 
                                'text-danger': hasError }">
    </div>

    <div v-bind:class="classObject"></div>

    <div v-bind:class="[activeClass, errorClass]"></div>

</body>

</html>